<template>
  <el-form ref="form" class="plr-1" label-position="top" :model="form" :rules="rules" :disabled="saving">
    <el-form-item label="所属事业部" prop="biz_id">
      <cl-select v-model="form.biz_id" style="width: 100%" placeholder="请选择事业部" filterable :disabled="editing"
        @change="changeBiz">
        <el-option v-for="item in business" :key="item.biz_id" :label="item.biz_name" :value="item.biz_id" />
      </cl-select>
    </el-form-item>
    <el-form-item label="品牌" prop="bra_id">
      <cl-select v-model="form.bra_id" placeholder="请选择品牌" filterable style="width: 100%" @change="changeBrand">
        <el-option v-for="item in bizRefData.brand" :key="item.bra_id" :label="item.bra_name" :value="item.bra_id" />
      </cl-select>
    </el-form-item>
    <el-form-item label="模板名称" prop="name">
      <el-input v-model="form.name" placeholder="请输入模板名称" />
    </el-form-item>
    <el-form-item label="网页标题" prop="title">
      <el-input v-model="form.title" placeholder="请输入网页标题" />
    </el-form-item>
    <el-form-item label="网页背景色" prop="backgroundColor">
      <div class="flex">
        <cl-flex1>
          <el-input v-model="form.backgroundColor" placeholder="请输入网页背景色" />
        </cl-flex1>
        <el-color-picker v-model="form.backgroundColor" class="ml-1" />
      </div>
    </el-form-item>
    <el-form-item prop="direct_skip_mp" label="自动跳转小程序">
      <div class="tips" style="line-height: normal;">
        开启该功能后，用户访问时优先通过微信小程序形式打开下方所选链接；未跳转或跳转失败则依旧留在当前页面
      </div>
      <cl-select v-model="form.auto_skip_mp" style="width: 100%">
        <el-option :value="1" label="是" />
        <el-option :value="0" label="否" />
      </cl-select>
    </el-form-item>
    <template v-if="form.auto_skip_mp == 1">
      <el-form-item prop="skip_mp_id" label="跳转小程序(支持多选)">
        <div class="tips" style="line-height: normal;">默认不选则默认加微弹窗</div>
        <cl-select v-model="form.skip_mp_id" style="width: 100%" multiple :multiple-limit="20" filterable clearable>
          <el-option v-for="item in adMpList" :key="item.id" :value="item.id" :label="item.title" />
        </cl-select>
        <!-- <cl-select-load-more
					ref="selectMpAd"
					v-model="form.skip_mp_id"
					placeholder="请选择跳转小程序"
					style="width: 100%"
					:apiFn="apiAdMpListFn"
					@change="changeAdMpFn"
					:initRequest="true"
					keyword="title"
				>
					<template v-slot="{ data }">
						<el-option
							v-for="item in data"
							:key="item.id"
							:label="item.title"
							:value="item.id"
						/>
					</template>
</cl-select-load-more> -->
      </el-form-item>
      <el-form-item prop="mp_query" label="小程序页面参数">
        <div class="tips" style="line-height: normal;">默认不填为当前模板页面参数</div>
        <el-input v-model="form.mp_query" placeholder="请输入小程序页面参数" />
      </el-form-item>
    </template>
    <el-form-item prop="enable_service">
      <template #label>
        开启客服
        <span class="tips">(用于PC过审是，请选择“否”)</span>
      </template>
      <cl-select v-model="form.enable_service" style="width: 100%">
        <el-option :value="1" label="是" />
        <el-option :value="0" label="否" />
      </cl-select>
    </el-form-item>
    <template v-if="form.enable_service">
      <el-form-item label="加微复制方式" prop="copy_type">
        <cl-select v-model="form.copy_type" style="width: 100%">
          <el-option :value="1" label="自动复制" />
          <el-option :value="2" label="长按复制" />
        </cl-select>
      </el-form-item>
      <el-form-item prop="enable_location_wechat">
        <template #label>
          开启微信直接跳
          <span class="tips">(选择“是”，点击复制时直接跳转至微信)</span>
        </template>
        <cl-select v-model="form.enable_location_wechat" style="width: 100%">
          <el-option :value="1" label="是" />
          <el-option :value="0" label="否" />
        </cl-select>
      </el-form-item>
      <el-form-item prop="wechat_dialog_desc" label="加微弹窗描述文本">
        <cl-wang-editor ref="content" :height="200" v-model.trim="form.wechat_dialog_desc" />
      </el-form-item>
    </template>

    <el-form-item label="行为代码" prop="code_ids" required :rules="[{ required: true, message: '请选择行为代码' }]">
      <cl-select v-model="form.code_ids" style="width: 100%" placeholder="请选择行为代码" filterable multiple collapse-tags
        clearable>
        <el-option v-for="item in behaviorList" :key="item.id" :label="item.name" :value="item.id" />
      </cl-select>
    </el-form-item>
  </el-form>
</template>
<script>
import { validate } from "@/utils/validate";
import miniList from "../../mixins/mini_list.js"

export default {
  mixins: [miniList],
  props: {
    editing: Boolean,
    saving: Boolean,
    config: {
      type: Object,
      default: () => ({})
    },
    adMpList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      form: this.config,
      rules: {
        biz_id: [{ required: true, message: "请选择事业部" }],
        bra_id: [{ required: true, message: "请选择品牌" }],
        name: [{ required: true, message: "请填写模板名称" }],
        title: [{ required: true, message: "请填写网页标题" }],
        backgroundColor: [
          { required: true, message: "请填写网页背景色" },
          { pattern: validate.hexColor, message: "网页背景色格式不正确" }
        ],
        enable_service: [{ required: true, message: "请选择是否开启客服" }],
        copy_type: [{ required: true, message: "请选择加微复制方式" }]
      },
      behaviorList: []
    };
  },
  computed: {
    bizRefData() {
      let { biz_id } = this.form;
      return this.getBizRefData(biz_id);
    }
  },
  watch: {
    config: {
      immediate: true,
      handler(v) {
        this.form = v;
      }
    },
    "config.biz_id"() {
      this.init();
    }
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      const { biz_id } = this.form;
      this.getBizRefBrand(biz_id);
      this.getBehaviorList();
    },
    //切换事业部
    changeBiz() {
      this.form.bra_id = "";
      this.form.code_ids = [];
      // this.init();
      const { biz_id } = this.form;
      this.$emit("change-biz", biz_id);
    },
    // 切换品牌
    changeBrand() {
      this.form.code_ids = [];
      // this.$emit("change-biz");
      this.getBehaviorList();
    },
    async getBehaviorList() {
      const { biz_id, bra_id } = this.form;
      if (!biz_id) {
        this.behaviorList = [];
        return;
      }
      this.behaviorList = await this.$service.ad.templateBehavior({ biz_id, bra_id });
    },
    validateForm() {
      let isTrue = this.$refs.form.validate()
      return isTrue

    }
  }
};
</script>
